<template>
    <view class="page">

        <view class="title">幻次元注册</view>
        <view class="input_box"><input type="text" v-model="email" placeholder="请输入邮箱账号" /></view>
        <view class="input_box">
            <input type="number" v-model="code" placeholder="请输入验证码" />
            <button @click="getCode">{{codeText}}</button>
        </view>
		<view class="input_box"><input type="text" v-model="username" placeholder="请输入用户名" /></view>
        <view class="input_box"><input password v-model="password" placeholder="请输入密码" /></view>
        <view class="input_box"><input password v-model="confirmPassword" placeholder="请确认密码" /></view>
        <view class="input_box"><input type="text" v-model="recommendCode" placeholder="推荐码（非必填）" @confirm="onSubmit" />
        </view>
        <view class="protocol_box">
            <view class="select" :class="{active: agree}" @click="agree = !agree"></view>
            我已同意
            <text @click="onPageJump('/pages/user/protocol')">《用户注册协议》</text>
            和
            <text @click="onPageJump('/pages/user/protocol')">《隐私协议》</text>
        </view>
        <view class="btn_box"><button @click="onSubmit">注册</button></view>
    </view>
</template>

<script>
    //import md5 from '@/config/md5';

    var clear;
    export default {
        data() {
            return {
                //邮箱
                email: '',
                // 密码
                password: '',
                //验证码
                code: '',
				username:'',
                //确认密码
                confirmPassword: '',
                // 推荐码
                recommendCode: "",
                //验证码
                codeText: '获取验证码',
				serverCode: '', // 从API获取的验证码
				timer: null, // 定时器
                //验证码已发
                readonly: false,
                agree: false,
				emailRegular: /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/ // 邮箱正则
            };
        },
        //第一次加载
        onLoad(e) {},
        //页面显示
        onShow() {},
        //方法
        methods: {
            onJumpPage(url) {
                uni.navigateTo({
                    url: url
                });
            },
            // 获取验证码
            getCode() {
                if (this.readonly) {
                    uni.showToast({
                        title: '验证码已发送',
                        icon: 'none'
                    });
                    return;
                }
                if (!this.email) {
                    uni.showToast({
                        title: '请输入邮箱',
                        icon: 'none'
                    });
                    return;
                }
                if (!this.emailRegular.test(this.email)) {
                    uni.showToast({
                        title: '请输入正确的邮箱',
                        icon: 'none'
                    });
                    return;
                }
            
                // 向服务器发送请求获取验证码
                this.sendCodeRequest();
            },
            
            // 发送验证码请求
            sendCodeRequest() {
                const _this = this;
            
                // 假设有一个API可以向服务器发送验证码
                uni.request({
                    url: 'http://14.103.233.198:9999/sendVerificationCode', // 替换为你的验证码发送接口
                    method: 'POST',
                    data: {
                        email: this.email
                    },
                    success(res) {
						console.log(res.data);
                        if (res.data.success) {
                            // 保存服务器返回的验证码
                            _this.serverCode = res.data.code;  // 假设API返回的验证码在 data.code 中
                            // 请求成功后开始倒计时
                            _this.getCodeState();
                        } else {
                            uni.showToast({
                                title: res.data.message || '发送失败',
                                icon: 'none'
                            });
                        }
                    },
                    fail() {
                        uni.showToast({
                            title: '网络请求失败，请重试',
                            icon: 'none'
                        });
                    }
                });
            },
            
            // 验证码按钮文字状态
            getCodeState() {
                const _this = this;
                this.readonly = true; // 禁用按钮
                this.codeText = '60S后重新获取'; // 显示倒计时
                let s = 60;
                // 清除上一个定时器，防止多次触发
                if (this.timer) {
                    clearInterval(this.timer);
                }
                this.timer = setInterval(() => {
                    s--;
                    _this.codeText = s + 'S后重新获取';
                    if (s <= 0) {
                        clearInterval(_this.timer);
                        _this.codeText = '获取验证码'; // 倒计时结束，恢复按钮文字
                        _this.readonly = false; // 恢复按钮可点击状态
                    }
                }, 1000);
            },
            onSubmit() {
                if (!this.agree) {
                    uni.showToast({
                        title: '请先同意《用户协议》和《隐私协议》',
                        icon: 'none'
                    });
                    return;
                }
                if (!this.email) {
                    uni.showToast({
                        title: '请输入邮箱',
                        icon: 'none'
                    });
                    return;
                }
                if (!this.emailRegular.test(this.email)) {
                    uni.showToast({
                        title: '请输入正确的邮箱',
                        icon: 'none'
                    });
                    return;
                }
                if (!this.code) {
                    uni.showToast({
                        title: '请输入验证码',
                        icon: 'none'
                    });
                    return;
                }
                if (!this.password) {
                    uni.showToast({
                        title: '请输入密码',
                        icon: 'none'
                    });
                    return;
                }
                if (!this.confirmPassword) {
                    uni.showToast({
                        title: '请输入确认密码',
                        icon: 'none'
                    });
                    return;
                }
                if (this.confirmPassword != this.password) {
                    uni.showToast({
                        title: '两次密码不一致',
                        icon: 'none'
                    });
                    return;
                }
				// 正则表达式用于验证密码强度
				const regex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[_!@#$%^&*]).{8,}$/;
				if (!regex.test(this.password)) {
				    uni.showToast({
				        title: '密码必须至少包含一个大写字母、一个小写字母、一个数字和一个特殊字符，并且长度至少为 8 位',
				        icon: 'none'
				    });
				    return;
				}
				if (this.code === this.serverCode) {
				    uni.showToast({
				        title: '验证码正确',
				        icon: 'success'
				    });
				    // 可以继续进行后续操作，比如提交表单等
				} else {
				    uni.showToast({
				        title: '验证码错误',
				        icon: 'none'
				    });
					return;
				}
				console.log(this.email,this.username,this.password)
                uni.request({
                    url: 'http://14.103.233.198:9999/register', // 替换为你的验证码发送接口
                    method: 'POST',
                    data: {
                        email: this.email,
						username:this.username,
						password:this.password
                    },
                    success(res) {
                		console.log(res.data);
                        if (res.data.success) {
                            uni.showToast({
                                title:'注册成功',
                                icon: 'success'
                            });
							uni.reLaunch({
							  url: '/pages/tabbar/tabbar-1/tabbar-1'
							});
                        } else {
                            uni.showToast({
                                title: res.data.message || '注册失败',
                                icon: 'none'
                            });
                        }
                    },
                    fail() {
                        uni.showToast({
                            title: '网络请求失败，请重试',
                            icon: 'none'
                        });
                    }
                });

            },
            //页面隐藏
            onHide() {},
            //页面卸载
            onUnload() {},
            //页面下来刷新
            onPullDownRefresh() {},
            //页面上拉触底
            onReachBottom() {},

        },
    }
</script>
<style lang="scss" scoped>
    @import '@/style/mixin.scss';

    .page {
        background-color: #FFF;
        padding: 0 56rpx;
        min-height: 100vh;

        .title {
            padding: 28rpx 0 20rpx 0;
            font-size: 52rpx;
            color: #333333;
        }

        .input_box {
            display: flex;
            justify-content: space-between;
            height: 100rpx;
            padding-top: 20rpx;
            border-bottom: 1rpx solid #eeeeee;

            input {
                flex: 1;
                height: 80rpx;
                line-height: 80rpx;
                font-size: 30rpx;
            }

            button {
                height: 78rpx;
                line-height: 78rpx;
                font-size: 30rpx;
                color: $themeColor;

                &:active {
                    background-color: transparent;
                }
            }
        }

        .btn_box {
            margin-top: 40rpx;

            button {
                font-size: 32rpx;
                @include theme('btn_bg') ;
				color: #fff;
                height: 100rpx;
                line-height: 100rpx;
                border-radius: 8rpx;
            }
        }

        .protocol_box {
            margin-top: 40rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            font-size: 28rpx;
            color: #333333;

            .select {
                width: 36rpx;
                height: 36rpx;
                background-image: url("@/static/icon/ic_gender_unselected.png");
                background-position: center center;
                background-repeat: no-repeat;
                background-size: 100% auto;
                margin-right: 15rpx;

                &.active {
                    background-image: url("@/static/icon/ic_agreed.png");
                }
            }

            >text {
                color: $themeColor;
            }
        }
    }
</style>